<template>
    <view class="coupon_detail">
        <view :class="invalid ? 'coupon_main coupon_invalid' : 'coupon_main'">
            <view class="coupon_contatner">
                <view class="heard_right">
                    <img :src="getImgFun()" />
                </view>
                <view v-if="invalid" class="coupon_invalid">
                    <!-- 已使用 -->
                    <img v-if="invalid === 1" :src="getImgOssUrl('/ui-prod-2.13.0/used.png')" />
                    <!-- 已过期 -->
                    <img v-if="invalid === 2" :src="getImgOssUrl('/ui-prod-2.13.0/expire.png')" />
                </view>
                <view class="coupon_title">{{ Data.couponTitle }}</view>
                <view class="coupon_price"
                    >{{ floatDivide(Data.couponDiscountContent, 100)
                    }}<span class="unit" v-if="Data.couponType === 1">元</span>
                    <span class="unit" v-if="Data.couponType === 2">折</span>
                </view>
                <view class="coupon_condition" v-if="Data.couponEveryDecrease > 1 && Data.couponType === 1">
                    每满{{ floatDivide(Data.couponPrerequisitesAdditional, 100) }}元减{{
                        floatDivide(Data.couponDiscountContent, 100)
                    }}元
                </view>
                <view v-if="Data.couponDiscountMost && Data.couponType === 2" class="coupon_condition">
                    最高优惠{{ floatDivide(Data.couponDiscountMost, 100) }}元
                </view>
                <view class="coupon_condition">
                    <span>{{ conditionContent }}</span>
                    <span v-if="Data.couponMatch === 1">全部商品可用</span>
                    <span v-else>部分商品可用</span>
                </view>
                <view class="coupon_time"
                    >用券时间：<span v-if="Data.couponTimeStart && Data.couponTimeType === 1"
                        >{{ Data.couponTimeStart }}~{{ Data.couponTimeEnd }}
                    </span>
                    <span class="time" v-else-if="Data.couponTimeType === 2">
                        领券后当天有效，{{ Data.couponTimeValue }}天内可用
                    </span>
                    <span class="time" v-else-if="Data.couponTimeType === 3">
                        领券次日生效，{{ Data.couponTimeValue }}天内可用
                    </span>
                </view>
                <view class="coupon_action" v-if="showBtn">
                    <view
                        :class="disabled ? 'coupon_action_use disabled' : 'coupon_action_use'"
                        @click="emit('comfirm')">
                        {{ btnName }}
                    </view>
                </view>
                <view class="coupon_concave">
                    <view class="left_round"></view>
                    <view class="right_round"></view>
                    <view class="dashed"></view>
                </view>
                <view class="coupon_desc">
                    <view class="coupon_desc_title">使用说明：</view>
                    <view class="coupon_desc_content">
                        {{ Data.couponDescription }}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
import { getImgOssUrl, floatDivide } from '@/commons/utils';
import { ref, reactive, onMounted, computed } from 'vue';
const emit = defineEmits(['comfirm']);
const props = defineProps({
    Data: {
        default: () => {
            return {
                // 优惠券类型
                couponType: null,
                // 优惠数额
                couponDiscountContent: null,
                // 优惠券标题
                couponTitle: null,
                // 优惠券有效期
                couponTimeStart: null,
                couponTimeEnd: null,
                couponTimeValue: '',
                // 优惠券使用范围
                couponMatch: null,
                // 优惠券描述
                couponDescription: null,
                // 优惠券使用门槛
                couponPrerequisites: null,
                couponPrerequisitesAdditional: null
            };
        },
        type: Object
    },
    btnName: {
        type: String,
        default: ''
    },
    disabled: {
        type: Boolean,
        default: false
    },
    showBtn: {
        type: Boolean,
        default: true
    }
});
const invalid = computed(() => {
    return props.Data.invalid;
});

const getImgFun = () => {
    let url = '';
    if (props.Data.couponType === 1) {
        url = getImgOssUrl(`/ui-prod-2.13.0/manjian_coupon${invalid.value ? '_used' : ''}.png`);
    } else if (props.Data.couponType === 2) {
        url = getImgOssUrl(`/ui-prod-2.13.0/zhekou_coupon${invalid.value ? '_used' : ''}.png`);
    }
    return url;
};

const conditionContent = computed(() => {
    switch (props.Data.couponPrerequisites) {
        case 1:
            return '无门槛，';
        case 2:
            return `满${floatDivide(props.Data.couponPrerequisitesAdditional, 100)}元，`;
        case 3:
            return `满${props.Data.couponPrerequisitesAdditional}件，`;
        default:
            return '';
    }
});
</script>
<style lang="scss" src="./detail.scss" scoped></style>
